<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org/extras/dialect"
      layout:decorate="admin/layout/layout"
>

<head>
    <title>用户列表</title>
</head>

<body class="scroll-container">
<div layout:fragment="content">
    <div class="wrapper page-wrapper scrollable">
        <div class="page-content">
            <div class="row">
                <div class="col-lg-12">
                    <div class="plate">

                        <div class="plate-head  d-flex justify-content-between">
                            <div class="plate-title">用户列表</div>
                            <div class="plate-tools">
                                <a data-toggle="collapse" href="#advanced-filter" aria-expanded="false" aria-controls="advanced-filter">高级搜索</a>
                            </div>
                        </div>

                        <div class="plate-body clearfix">

                            <form class="form-inline form-filter">
                                <div class="row m-0">
                                    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                                        <input type="text" name="username" class="form-control" placeholder="用户帐号">
                                        <input type="text" name="realName" class="form-control" placeholder="用户实名">
                                        <input type="text" name="mobile" class="form-control" placeholder="手机号码">
                                        <input type="text" name="email" class="form-control" placeholder="电子邮箱">
                                    </div>
                                    <div class="row m-0">
                                        <div data-type="datetime-picker" class="input-group mb-2 mr-sm-2 mb-sm-0">
                                            <input name="createTime_start" type="text" class="form-control" readonly="" data-pick-time="false" data-format="yyyy-MM-dd" placeholder="创建时间起始">
                                            <span class="input-group-addon"><i class="" data-time-icon="fa fa-clock-o" data-date-icon="fa fa-calendar"></i></span>
                                        </div>

                                        <div data-type="datetime-picker" class="input-group mb-2 mr-sm-2 mb-sm-0">
                                            <input name="createTime_endDate" type="text" class="form-control" readonly="" data-pick-time="false" data-format="yyyy-MM-dd" placeholder="创建时间截止">
                                            <span class="input-group-addon"><i class="" data-time-icon="fa fa-clock-o" data-date-icon="fa fa-calendar"></i></span>
                                        </div>

                                    </div>
                                </div>

                                <div id="advanced-filter" class="collapse w-100">
                                </div>

                                <div class="row m-0 mt-2 w-100">
                                    <input id="filterBtn" class="btn btn-primary mr-2" type="button" value="过滤">
                                    <input class="btn btn-secondary mr-2" type="reset" value="重置">
                                    <a data-toggle="collapse" href="#advanced-filter" aria-expanded="false" aria-controls="advanced-filter"
                                       style="padding-top: 12px; text-decoration: underline;">高级过滤</a>
                                </div>
                            </form>

                            <div id="customForm">
                                <ul class="nav nav-tabs" id="myTabs" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#user_baseInfo" data-toggle="tab" role="tab" aria-selected="true">基本信息</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#user_statusInfo" data-toggle="tab" role="tab" aria-selected="false">状态信息</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#user_clientRole" data-toggle="tab" role="tab" aria-selected="false">系统角色</a>
                                    </li>
                                </ul>

                                <div id="myTabContent1" class="tab-content">
                                    <div class="tab-pane in active" id="user_baseInfo">
                                        <div data-editor-template="avatar"></div>
                                        <div data-editor-template="username"></div>
                                        <div data-editor-template="password"></div>
                                        <div data-editor-template="nickname"></div>
                                        <div data-editor-template="realName"></div>
                                        <div data-editor-template="idCard"></div>
                                        <div data-editor-template="telephone"></div>
                                        <div data-editor-template="email"></div>
                                    </div>
                                    <div class="tab-pane fade" id="user_statusInfo">
                                        <div data-editor-template="userType"></div>
                                        <div data-editor-template="enabled"></div>
                                        <div data-editor-template="telephoneEnabled"></div>
                                        <div data-editor-template="emailEnabled"></div>
                                        <div data-editor-template="online"></div>
                                    </div>
                                    <div class="tab-pane fade" id="user_clientRole">
                                        <div data-editor-template="originSystem.id"></div>
                                        <div data-editor-template="userRoles[].role.id"></div>
                                    </div>
                                </div>
                            </div>


                            <!--<div id="customForm1">
                                <fieldset class="name">
                                    <legend>基本信息</legend>
                                    <editor-field name="avatar"></editor-field>
                                    <editor-field name="username"></editor-field>
                                    <editor-field name="password"></editor-field>
                                    <editor-field name="nickname"></editor-field>
                                    <editor-field name="realName"></editor-field>
                                    <editor-field name="idCard"></editor-field>
                                    <editor-field name="telephone"></editor-field>
                                    <editor-field name="email"></editor-field>
                                </fieldset>
                                <fieldset class="office">
                                    <legend>状态信息</legend>
                                    <editor-field name="userType"></editor-field>
                                    <editor-field name="enabled"></editor-field>
                                    <editor-field name="telephoneEnabled"></editor-field>
                                    <editor-field name="emailEnabled"></editor-field>
                                    <editor-field name="online"></editor-field>
                                </fieldset>
                                <fieldset class="hr">
                                    <legend>所属系统和角色</legend>
                                    <editor-field name="originSystem.id"></editor-field>
                                    <editor-field name="userRoles[].role.id"></editor-field>
                                </fieldset>
                            </div>-->

                            <table id="dataTable" class="table responsive table-bordered table-hover" cellspacing="0" width="100%">
                                <thead>
                                <tr>
                                    <th class="all">
                                        <label class="custom-control custom-checkbox">
                                            <input id="check-all" type="checkbox" class="custom-control-input">
                                            <span class="custom-control-indicator"></span>
                                        </label>
                                    </th>
                                    <th>用户头像</th>
                                    <th class="all" data-priority="1">用户帐号</th>
                                    <th>用户密码</th>
                                    <th>用户昵称</th>
                                    <th>用户实名</th>
                                    <th>身份证号</th>
                                    <!--<th>电话号码</th>
                                    <th>电子邮箱</th>-->
                                    <th>用户类型</th>
                                    <th>所属系统</th>
                                    <th>使能状态</th>
                                    <!--<th>电话验证</th>
                                    <th>邮箱验证</th>-->
                                    <th>在线状态</th>
                                    <!--<th>用户角色</th>-->
                                    <th class="min-tablet-l">创建时间</th>
                                    <th data-priority="1">操作</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                                <tfoot></tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript" src="../../../static/asset/js/base.min.js" th:src="@{/asset/js/base.min.js}"></script>
    <script type="text/javascript" src="../../../static/asset/js/form.min.js" th:src="@{/asset/js/form.min.js}"></script>
    <script type="text/javascript" src="../../../static/asset/js/datatables.min.js" th:src="@{/asset/js/datatables.min.js}"></script>
    <script type="text/javascript" src="../../../static/asset/js/common/dataTables.ext.js" th:src="@{/asset/js/common/dataTables.ext.js}"></script>
    <script type="text/javascript" src="../../../static/asset/js/app.js" th:src="@{/asset/js/app.js}"></script>

    <script>

        /*<![CDATA[*/
        var creatorId = [[${#authentication.principal.userId}]];
        var contextPath = '[[${#httpServletRequest.getContextPath()}]]';
        /*]]>*/

        $(function () {
            $('#myTabs a').click(function (e) {
                e.preventDefault();
                $(this).tab('show');
            });

            var editor = new $.fn.dataTable.Editor({
                ajax: './list/action',
                table: "#dataTable",
                template: '#customForm',
                idSrc: 'id',
                fields: [
                    {name: 'id', type: 'hidden'},
                    {name: 'creator.id', type: 'hidden'},
                    {
                        label: '用户头像:',
                        name: 'avatar',
                        type: 'upload',
                        display: function (fileId) {
                            var result = '';
                            try {
                                var fileUrl = editor.file('files', fileId);
                                result = '<img src="' + fileUrl.webPath + '"/>';
                            } catch (e) {
                            }
                            return result;
                        },
                        fieldInfo: '<div style="color:red">注意：图片成功上传后300秒内有效!</div>'
                    },
                    {label: '用户帐号:', name: 'username'},
                    {label: '用户密码:', name: 'password'},
                    {label: '用户昵称:', name: 'nickname'},
                    {label: '用户实名:', name: 'realName'},
                    {label: '身份证号:', name: 'idCard'},
                    {label: '电话号码:', name: 'telephone'},
                    {label: '电子邮箱:', name: 'email'},
                    {
                        label: '用户类型:',
                        name: 'userType',
                        type: 'select',
                        options: [
                            {label: '普通用户', value: 'USER'},
                            {label: "管理员", value: 'MANAGER'}
                        ],
                        def: 'USER'
                    },
                    {
                        label: '使能状态:', name: 'enabled',
                        type: 'select',
                        options: [
                            {label: '有效', value: true},
                            {label: "无效", value: false}
                        ],
                        def: true
                    },
                    {
                        label: '电话验证:', name: 'telephoneEnabled',
                        type: 'select',
                        options: [
                            {label: '已验证', value: true},
                            {label: "未验证", value: false}
                        ],
                        def: true
                    },
                    {
                        label: '邮箱验证:', name: 'emailEnabled',
                        type: 'select',
                        options: [
                            {label: '已验证', value: true},
                            {label: "未验证", value: false}
                        ],
                        def: true
                    },
                    {
                        label: '在线状态:', name: 'online',
                        type: 'select',
                        options: [
                            {label: '在线', value: true},
                            {label: "离线", value: false}
                        ],
                        def: true
                    },
                    {
                        label: '所属系统：',
                        name: 'originSystem.id',
                        type: 'select2',
                        events: {
                            "select2:select": function (e) {
                                editor.field('userRoles[].role.id').val('');
                            },
                            "select2:unselect": function (e) {
                                editor.field('userRoles[].role.id').val('');
                            }
                        },
                        select2Opt: {
                            placeholder: '-',
                            allowClear: true,
                            multiple: false,
                            templateResult: function (data) {
                                return data ? data.text : "";
                            },
                            templateSelection: function (data, container) {
                                return data ? data.text : "";
                            },
                            ajax: {
                                url: '../client/select2'
                            }
                        }
                    },
                    {
                        label: '用户角色：',
                        name: 'userRoles[].role.id',
                        type: 'select2',
                        select2Opt: {
                            placeholder: '-',
                            allowClear: true,
                            multiple: true,
                            templateResult: function (data) {
                                return data ? data.text : "";
                            },
                            templateSelection: function (data, container) {
                                return data ? data.text : "";
                            },
                            ajax: {
                                url: function () {
                                    var sys_id = editor.field('originSystem.id').val();
                                    return '../role/select2?originSystem.id=' + sys_id;
                                }
                            }
                        }
                    }
                ]
            }).on('initCreate', function (e, o, action) {
                //创建时隐藏字段。
                editor.enable('username');
                editor.enable('realName');
                editor.enable('idCard');
                editor.enable("originSystem.id");
            }).on('initEdit', function (e, o, action) {
                //编辑时隐藏字段。
                editor.disable('username');
                editor.disable('realName');
                editor.disable('idCard');
                editor.disable("originSystem.id");
                //editor.hide('originSystem.id');
            });

            // Edit record
            $('#dataTable').on('click', 'a.editor_edit', function (e) {
                e.preventDefault();

                editor.edit($(this).closest('tr'), {
                    title: '编辑记录',
                    buttons: {
                        label: '提交',
                        className: 'btn-primary',
                        fn: function () {
                            editor.submit();
                        }
                    }
                });
            });

            // Delete a record
            $('#dataTable').on('click', 'a.editor_remove', function (e) {
                e.preventDefault();

                editor.remove($(this).closest('tr'), {
                    title: '删除记录',
                    message: '确定删除该记录?',
                    buttons: {
                        label: '提交',
                        className: 'btn-danger',
                        fn: function () {
                            editor.submit();
                        }
                    }
                });
            });

            $('#dataTable').on('click', 'a.editor_release_lock', function (e) {
                e.preventDefault();

                var userId = $(this).attr('userId');

                editor.remove($(this).closest('tr'), {
                    title: '解锁用户',
                    message: '确定解锁选中的用户?',
                    buttons: {
                        label: '提交',
                        className: 'btn-danger',
                        fn: function () {
                            $.ajax({
                                url: contextPath + '/lock/release/' + userId,
                                type: 'post',
                                success: function (json) {
                                    editor.close();
                                    App.alert(json.message);
                                }
                            });
                        }
                    }
                });
            });

            var table = $('#dataTable').DataTable({
                select: true,
                autoWidth: false,
                ajax: {
                    "url": './list/data', // ajax source
                    "type": 'post'
                },
                "buttons": [
                    {text: '新增', extend: "create", className: "btn btn-primary", editor: editor},
                    {
                        text: '刷新',
                        className: 'btn btn-secondary btn-outline',
                        action: function (e, dt, node, config) {
                            dt.ajax.reload();
                        }
                    }
                ],
                columns: [
                    {
                        data: "id",
                        orderable: true,
                        visible: true
                    },
                    {
                        data: "avatar",
                        searchable: false,
                        orderable: false,
                        render: function (data, type, row, meta) {
                            return '<a target="_blank" href="' + data + '"><img style="width:20px; height:20px;" src="' + data + '"/></a>';
                        }
                    },
                    {
                        data: "username",
                        searchable: true,
                        visible: true
                    },
                    {
                        data: "password",
                        searchable: true,
                        visible: false
                    },
                    {
                        data: "nickname",
                        searchable: true,
                        visible: true
                    },
                    {
                        data: "realName",
                        searchable: true,
                        visible: true
                    },
                    {
                        data: "idCard",
                        searchable: false,
                        visible: true
                    },
                    /*{
                        data: "telephone",
                        searchable: false,
                        visible: true
                    },
                    {
                        data: "email",
                        searchable: false,
                        visible: true
                    },*/
                    {
                        data: "userType",
                        searchable: false,
                        visible: true,
                        render: function (data, type, row, meta) {
                            var result = "";
                            switch (data) {
                                case "USER":
                                    result = "普通用户";
                                    break;
                                case "MANAGER":
                                    result = "管理员";
                                    break;
                                default:
                                    result = "未知类型";
                            }
                            return result;
                        }
                    },
                    {
                        data: "originSystem",
                        searchable: false,
                        visible: true,
                        render: function (data, type, row, meta) {
                            return data ? data.name : "TMT用户中心";
                        }
                    },
                    {
                        data: "enabled",
                        searchable: false,
                        visible: true
                    },
                    /*{
                        data: "telephoneEnabled",
                        searchable: false,
                        visible: true
                    },
                    {
                        data: "emailEnabled",
                        searchable: false,
                        visible: true
                    },*/
                    {
                        data: "online",
                        searchable: false,
                        visible: true
                    },
                    /*{
                        data: "userRoles",
                        searchable: false,
                        visible: true,
                        render: function (data, type, row, meta) {
                            var result = "";
                            if (data){
                            	for(var i=0; i< data.length; i++)
                            	    result += data[i].role.name + "&nbsp;&nbsp;";
							}
                            return result;
                        }
                    },*/
                    {
                        data: "createTime",
                        searchable: false,
                        visible: true
                    },
                    {
                        data: "id",
                        searchable: false,
                        orderable: false,
                        visible: true
                    }
                ],
                order: [1, "desc"],
                columnDefs: [
                    {
                        targets: [0],
                        render: function (data, type, row, meta) {
                            return '<label class="custom-control custom-checkbox">'
                                + '	<input type="checkbox" class="custom-control-input">'
                                + '	<span class="custom-control-indicator"></span>' + data
                                + '</label>'
                        }
                    },
                    {
                        targets: [-1],
                        render: function (data, type, row, meta) {
                            var result = '<a href="javascript:;" class="editor_edit">编辑</a>';
                            result += '&nbsp;|&nbsp;<a href="javascript:;" class="editor_remove">删除</a>';
                            result += '&nbsp;|&nbsp;<a href="javascript:;" userId="' + row['id'] + '" class="editor_release_lock">解锁</a>';
                            return result;
                        }
                    }
                ]
            });

            table.ext.filter.form('.form-filter');
            table.ext.filter.submit('#filterBtn');
            table.ext.batchCheck('#check-all');

            /* $('#example').dataTable({
             "footerCallback": function( tfoot, data, start, end, display ) {
             var api = this.api();
             $( api.column(5).footer() ).html(
             api.column(5).data().reduce(function ( a, b ) {
             return App.floatVal(a) + App.floatVal(b);
             }, 0)
             );
             }
             });*/
        })
    </script>

    <!--{{> body-footer}}-->

</div>
</body>
</html>